import RichTextInput, { RichTextInputRef } from "@/components/dataEntry/RichTextInput";
import { cloneDeep } from "lodash";
import { useContext, useEffect, useRef } from "react";
import { ConfigurePageContext } from "../../ConfigurePage";
import { RichTextItem } from "../../ConfigurePageType";

const RichTextEditor = () => {
	const { selectedIndex, content, setContent } = useContext(ConfigurePageContext);
	const richTextInputRef = useRef<RichTextInputRef>(null);
	useEffect(() => {
		if (selectedIndex) {
			if (!content[selectedIndex].list.length) {
				content[selectedIndex].list.push({ text: "" });
			}
			richTextInputRef.current?.setValue((content[selectedIndex].list[0] as RichTextItem).text || "");
		}
	}, []);
	return (
		<>
			<RichTextInput
				height={480}
				ref={richTextInputRef}
				onChange={(value) => {
					if (!selectedIndex) return;
					const copiedData = cloneDeep(content);
					(copiedData[selectedIndex].list[0] as RichTextItem).text = value;
					setContent(copiedData);
				}}
			/>
		</>
	);
};

export default RichTextEditor;
